
// import App from './App.vue'

// new Vue({
//   render: h => h(App),
// }).$mount('#app')

// 非完成版npm引入Vue: 
// import Vue from 'vue' 
// Vue.config.productionTip = false
// import Demo from './Demo.vue'

// new Vue({
//   el:'#app',  
//   render(h){
//     return h(Demo)
//   }
// })

// 完整版
import Demo from './Demo.vue'

const Vue = window.Vue

Vue.config.productionTip = false

Vue.component('Demo2',{template://方法2，直接在js里面写组件，不需要引入组件文件
  `  
<div> 
Demo2's啦啦啦
</div>`
})

new Vue({ 
  components:{
    Demo, //方法1引入组件，并命名为Demo，等价于components:{Demo:Demo} 
    Demo3:{template: //方法3直接写components
      ` 
    <div> 
    Demo3's啦啦啦
    </div>`}
  }, 
  data:function(){ //这个data可以是对象
    return{
      n:0,
      array:[1,2,3,4,5,6,7,8,9],
      visible:true
    }
  },
template: 
`<div class="red">
{{n}}
<button @click="add">+1</button>
<hr>
<button @click="toggle">toggle</button>
<Demo :message="n" :fn="add" v-if='visible===true'/> 
<Demo2/>
<Demo3/>  
<hr>
{{filter()}}
</div>`,


methods:{
  add(){
    this.n+=1
  },
  filter(){
    return this.array.filter(i=>i%2===0)
  },
  toggle(){
    this.visible=!this.visible
  }
}
}).$mount('#app')

